<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>下班倒计时</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      background-color: rgb(82, 79, 79);
      color: rgb(0, 0, 0);
      font-family: digital-clock-font, sans-serif;
    }

    @font-face {
      font-family: digital-clock-font;
      src: url('Digital-7.ttf') format('truetype');
    }

    .container {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url('./动画相册/12.jpg');
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      transition: all 1s;
    }

    .clock {
      /* width: 500px; */
      /* height: 200px; */
      text-align: center;
      background-image: linear-gradient(to right, #f80000, #ff04f2, #000000, #f80000, #000000, #ff0000);
      font-weight: bold;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      /* color: rgb(255, 3, 3); */
    }

    .daojishi {
      font-size: 400px;
    }

    .xingqi {
      font-size: 120px;
    }

    .xiaban {
      font-size: 200px;
    }

    .today {
      font-size: 240px;
    }

    .juli {
      font-size: 240px;
    }

    .set1 {
      width: 20px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
    }

    .set2 {
      width: 20px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
    }

    .set3 {
      width: 20px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .set4 {
      width: 20px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    .setSome {
      position: absolute;
      display: flex;
      justify-content: space-around;
      align-items: center;
      bottom: 0;
      left: 30%;
      width: 40%;
    }

    .set5 {
      border-radius: 20px;
      background: yellow;
      width: 10px;
      height: 10px;
      cursor: pointer;
    }

    input {
      background: transparent;
      width: 50px;
      height: 20px;
    }

    .setTime {
      position: absolute;
      top: 0;
      left: 0;
    }

    .hideTime {
      display: none;
    }

    .hide {
      display: none;
    }
  </style>

</head>

<body>
  <div class="container">
    <!-- <button id="myButton">点击改变设置</button> -->
    <div class="set1" title="放置在左上角" onclick="changePosition(1)"></div>
    <div class="set2" title="放置在右上角" onclick="changePosition(2)"></div>
    <div class="set3" title="放置在右下角" onclick="changePosition(3)"></div>
    <div class="set4" title="放置在左下角" onclick="changePosition(4)"></div>
    <div class="setSome">
      <div class="set5" title="切换壁纸" onclick="changebgc()"></div>
      <div class="set5" title="改变大小" onclick="changeSize()"></div>
      <div class="set5" title="改变透明度" onclick="changeop()"></div>
      <div class="set5" title="设置下班时间" onclick="changeTime()"></div>
      <div class="set5" title="显示时间？" onclick="changeTimeHide()"></div>
      <div class="set5" title="时间透明度" onclick="changeTimeop()"></div>
    </div>
    <div class="setTime hide">
      <div class="timebox">

      </div>
    </div>
    <div id="countdown" class="clock">
      <div class='xiaban'>距离下班还有:</div>
      <div class='daojishi'></div>
      <div class='xingqi'>今天是星期<span class='today xqj'></span>，距离周六还有<span class='today juli'></span>天</div>
    </div>
  </div>
</body>
<script>
  const { ipcRenderer } = require('electron');
  //倒计时下班
  // 设置下班时间
  var endHour = 17; // 17:00
  var endMinute = 30; // 00 分
  var opObj = {
    1: 0.1,
    2: 0.2,
    3: 0.3,
    4: 0.4,
    5: 0.5,
    6: 0.6,
    7: 0.7,
    8: 0.8,
    9: 0.9,
    10: 1,
  }
  // 获取屏幕的宽高
  var screenWidth = window.screen.width;
  var screenHeight = window.screen.height;
  var sizeObj = {
    1: { width: 200, height: 150 },
    2: { width: 400, height: 300 },
    3: { width: 800, height: 600 },
    4: { width: 1200, height: 900 },
    5: { width: 1920, height: 1080 },
    6: { width: screenWidth, height: screenHeight },
  }
  // 网络壁纸 地址
  var cur = 1;
  var curSize = 2;
  var typeP = 3;
  var curOp = 4
  var timeopcur = 1

  //改变透明度
  function changeop() {
    curOp++;
    if (curOp > 10) curOp = 1;
    ipcRenderer.send('changeOpacity', opObj[curOp]);
  }
  //改变位置
  function changePosition(type) {
    typeP = type
    ipcRenderer.send('change-setting', type);
  }
  //changeSize
  function changeSize() {
    curSize++;
    if (curSize > 6) curSize = 1;
    ipcRenderer.send('changeSize', sizeObj[curSize]);
    changePosition(typeP)
  }
  //改变壁纸
  changebgc()
  function changebgc() {
    const randomParam = new Date().getTime(); // 使用当前时间戳作为随机参数
    let urllist = {
      url8: `https://cdn.seovx.com/?mom=302&rand=${randomParam}`,
    }
    document.querySelector('.container').style.backgroundImage = `url(${urllist.url8})`;
  }
  function updateCountdown() {
    // 获取今天的日期
    const today = new Date();
    // 获取今天是周几（0=周日，1=周一，2=周二，3=周三，4=周四，5=周五，6=周六）
    const dayOfWeek = today.getDay();
    // 计算距离周五还有几天
    // 周五是4，今天是dayOfWeek
    const daysUntilFriday = (5 - dayOfWeek + 7) % 7;
    // 输出结果
    const now = new Date();
    const endTime = new Date();
    endTime.setHours(endHour, endMinute, 0, 0); // 设置下班时间
    const remainingTime = endTime - now; // 计算剩余时间
    if (remainingTime < 0) {
      document.getElementById("countdown").innerHTML = "下班时间到了！";
      clearInterval(interval);
      return;
    }
    const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, '0');
    const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
    const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000).toString().padStart(2, '0');
    document.querySelector(".daojishi").innerHTML = `${hours}:${minutes}:${seconds}`;
    document.querySelector(".xqj").innerHTML = dayOfWeek;
    document.querySelector(".juli").innerHTML = daysUntilFriday;

  }
  // 每秒更新倒计时
  var interval = setInterval(updateCountdown, 1000);
  updateCountdown(); // 初始调用

  // 时间调整弹窗
  function changeTime() {
    document.querySelector('.setTime').classList.toggle('hide');
    //如果是显示  就插入  <div>HH:<input class="hh" type="text"></div>        <div>MM:<input class="mm" type="text"></div>        <button type="button" onclick="confirmTime()">确定</button>
    // 获取setTime 所有类名
    const setTimeClasses = document.querySelector('.setTime').classList;
    // 是否有hide
    if (setTimeClasses.value.includes('hide')) {
      document.querySelector('.timebox').innerHTML = '';
    } else {
      document.querySelector('.timebox').innerHTML = `<div>HH:<input class="hh" type="text"></div><div>MM:<input class="mm" type="text"></div><button type="button" onclick="confirmTime()">确定</button>`;
    }
  }

  document.querySelector('.mm')
  function confirmTime() {
    const inputH = document.querySelector('.hh')
    const inputM = document.querySelector('.mm')
    let inputHour = Number(inputH.value);
    let inputMinute = Number(inputM.value);
    // 输入的不是数字  默认就设置成17点
    if (isNaN(inputHour) || isNaN(inputMinute)) {
      inputHour = 17;
      inputMinute = 30;
    }
    if (inputHour < 0 || inputHour > 23 || inputMinute < 0 || inputMinute > 59) {
      alert('请输入有效的时间');
      return;
    }
    if (inputHour < 17) {
      alert('好工作啊，小老弟儿');
    }
    if (inputHour < 18 && inputHour >= 17) {
      alert('鉴定完毕，普通牛马');
    }
    if (inputHour < 19 && inputHour >= 18) {
      alert('鉴定完毕，中级牛马');
    }
    if (inputHour < 20 && inputHour >= 19) {
      alert('鉴定完毕，高级牛马');
    }
    if (inputHour > 20) {
      alert('鉴定完毕，顶级牛马');
    }
    endHour = inputHour;
    endMinute = inputMinute;
    changeTime();
    clearInterval(interval);
    interval = setInterval(updateCountdown, 1000);
    updateCountdown();
    //重置输入框
    inputH.value = '';
    inputM.value = '';
  }
  // 显示时间？
  function changeTimeHide() {
    document.querySelector('.clock').classList.toggle('hideTime')
  }
  //改变时间透明度
  function changeTimeop() {
    timeopcur++
    if (timeopcur > 10) timeopcur = 1
    // 设置clock 元素 的透明度
    document.querySelector('.clock').style.opacity = opObj[timeopcur];
  }
  // 设置键盘的1-9控制
  //  事件列表
  
  var interval = null
  document.addEventListener('keydown', function (event) {
    if(event.key=='*'){
      ipcRenderer.send('chuantou', true)
    }
    if(event.key=='.'){
      ipcRenderer.send('chuantou', false)
    }
    if (event.key === '1' || event.key === '2' || event.key === '3' || event.key === '4') {
      changePosition(event.key)
    }
    //改变大小
    if (event.key === '5') {
      changeSize()
    }
    //改变透明度
    if (event.key === '6') {
      changeop()
    }
    //显示时间？
    if (event.key === '7') {
      changeTimeHide()
    }
    //改变时间透明度
    if (event.key === '8') {
      changeTimeop()
    }
    //切换壁纸
    if (event.key === '9') {
      changebgc()
    }
    // - 停止自动切换壁纸
    if (event.key === '-') {
      clearInterval(interval);
    }
    //+ 开启自动切换壁纸
    if (event.key === '+') {
      interval = setInterval(changeAuto, 10000);
    }
    // / 显示隐藏 setSome  切换显示隐藏水印
    if (event.key === '/') {
      document.querySelector('.setSome').classList.toggle('hide');
      const setTimeClasses = document.querySelector('.setSome').classList;
      // 是否有hide
      if (setTimeClasses.value.includes('hide')) {
        watermarkFun('');
      } else {
        watermarkFun('公众号暮暮最后的倔强');
      }
    }

  })
  //是否开启自动切换壁纸
  function changeAuto() {
    changebgc()
  }
  // 监听窗口大小变化
  function resizeWindow() {
    //如果已经下班就return
    //   var endHour = 17; // 17:00
    // var endMinute = 30; // 00 分
    //当前时间小于下班时间 就return
    if (new Date().getHours() > endHour || (new Date().getHours() == endHour && new Date().getMinutes() > endMinute)) {
      return;
    }



    // 在这里可以根据窗口大小进行相应的调整
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    document.querySelector('.daojishi').style.fontSize = `${windowWidth / 1920 * 400}px`;
    document.querySelector('.xingqi').style.fontSize = `${windowWidth / 1920 * 120}px`;
    document.querySelector('.xiaban').style.fontSize = `${windowWidth / 1920 * 200}px`;
    document.querySelector('.today').style.fontSize = `${windowWidth / 1920 * 240}px`;
    document.querySelector('.juli').style.fontSize = `${windowWidth / 1920 * 240}px`;
  }
  window.addEventListener('resize', function () {
    if (new Date().getHours() > endHour || (new Date().getHours() == endHour && new Date().getMinutes() > endMinute)) {
      return;
    }
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    document.querySelector('.daojishi').style.fontSize = `${windowWidth / 1920 * 400}px`;
    document.querySelector('.xingqi').style.fontSize = `${windowWidth / 1920 * 120}px`;
    document.querySelector('.xiaban').style.fontSize = `${windowWidth / 1920 * 200}px`;
    document.querySelector('.today').style.fontSize = `${windowWidth / 1920 * 240}px`;
    document.querySelector('.juli').style.fontSize = `${windowWidth / 1920 * 240}px`;

  });
  resizeWindow()
  // 水印
  const watermarkFun = (item) => {
    // 唯一 id
    const id = '3.1415926.2346712';
    if (document.getElementById(id) !== null) {
      document.body.removeChild(document.getElementById(id));
    }
    //   如果存在containernewId   则删除
    if (document.getElementById("containernewId") !== null) {
      document.body.removeChild(document.getElementById("containernewId"));
    }
    // 创建一个用于容纳旋转文字的容器
    const container = document.createElement('div');
    container.id = "containernewId";
    container.style.position = 'fixed';
    container.style.top = '0';
    container.style.left = '0';
    container.style.width = '100%';
    container.style.height = '100%';
    container.style.pointerEvents = 'none';
    container.style.zIndex = 9999999;
    // 字体黑体
    container.style.fontFamily = 'serif';
    // 使用 canvas 绘制水印
    const canvasEle = document.createElement('canvas');
    canvasEle.width = 500;
    canvasEle.height = 300;
    const ctx = canvasEle.getContext('2d');
    ctx.font = '16px serif';
    // 透明度
    ctx.globalAlpha = 0.1;

    ctx.fillStyle = 'gray';
    ctx.textAlign = 'left';
    // 水印换行
    const watermarkLines = item.split('\n');
    const lineHeight = 20; // 每行的高度

    // 计算旋转中心的偏移量（假设以画布中心为旋转中心）
    const centerX = canvasEle.width / 2;
    const centerY = canvasEle.height / 2;

    // 开始旋转上下文
    ctx.translate(centerX, centerY);
    ctx.rotate((-15 * Math.PI) / 180); // 将角度转换为弧度
    ctx.translate(-centerX, -centerY);

    for (let i = 0; i < watermarkLines.length; i++) {
      // 根据旋转角度调整文字的绘制坐标
      const x = canvasEle.width / 16;
      const y = canvasEle.height / 2 + lineHeight * i;
      const rotatedX = x * Math.cos((-15 * Math.PI) / 180) - y * Math.sin((-15 * Math.PI) / 180);
      const rotatedY = x * Math.sin((-15 * Math.PI) / 180) + y * Math.cos((-15 * Math.PI) / 180);
      ctx.fillText(watermarkLines[i], rotatedX, rotatedY);
    }
    // 先清除原有的水印 
    const oldwatermark = document.getElementById('newId');
    if (oldwatermark) {
      document.body.removeChild(watermark);
    }
    // 创建一个用于显示水印的元素，并将其添加到容器中
    const watermarkEle = document.createElement('div');
    watermarkEle.id = "newId";
    watermarkEle.style.width = '100%';
    watermarkEle.style.height = '100%';
    watermarkEle.style.background = 'url(' + canvasEle.toDataURL() + ') left top repeat';
    container.appendChild(watermarkEle);

    // 将容器添加到 body
    document.body.appendChild(container);

    return id;
  };
  // 示例调用
  watermarkFun('公众号暮暮最后的倔强');
</script>

</html>